<template>
    <div
        class="flex flex-col bg-gray-50 h-full"
        :style="{
            height: 'calc(100vh - 84px)',
            overflow: 'hidden',
        }"
    >
        <!-- 主内容区：垂直居中+1.5:1宽比布局 -->

        <!-- 核心布局：左侧1.5倍宽度，右侧1倍宽度 -->
        <div class="flex h-full">
            <!-- 左侧：占比1.5份（父容器宽度的60%） -->
            <div style="width: 60%" class="flex items-center justify-center">
                <div class="flex flex-col items-center text-center">
                    <!-- 机器人容器：优化阴影层次，增强立体感 -->
                    <div
                        class="relative mb-5"
                        :style="{
                            width: 'clamp(180px, 30vw, 240px)',
                            height: 'clamp(180px, 30vw, 240px)',
                        }"
                    >
                        <!-- 机器人底座：外层阴影+内发光，增强视觉层次 -->
                        <div
                            class="w-full h-full rounded-full bg-white shadow-lg hover:shadow-xl flex items-center justify-center overflow-hidden transition-all duration-500"
                            :class="{
                                'robot-glow': true,
                                'robot-glow-hover': isRobotHover,
                            }"
                            @mouseenter="isRobotHover = true"
                            @mouseleave="isRobotHover = false"
                        >
                            <!-- 中间层：渐变柔和过渡，增加内阴影 -->
                            <div
                                class="w-[88%] h-[88%] rounded-full flex items-center justify-center shadow-inner"
                                :style="{
                                    backgroundImage:
                                        'linear-gradient(to bottom, var(--color-light)/90, var(--color-primary)/20)',
                                }"
                            >
                                <!-- 上层：白色底+细边框，突出主体 -->
                                <div
                                    class="w-[78%] h-[78%] rounded-full bg-white border border-gray-150 flex items-center justify-center shadow-sm"
                                >
                                    <!-- 机器人图像：优化过渡效果 -->
                                    <img
                                        src="https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/d557e12b3a6a47418b3f2a5289f800b7.png~tplv-a9rns2rl98-24:720:720.png?rcl=202509191102210FDBCDF1C94EAF6E148C&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1758855741&x-signature=JwpeJEBTTA79xct02I4yVC0BdoI%3D"
                                        alt="工程项目智能造价结算智能体"
                                        class="w-full h-full object-contain transition-transform duration-600 hover:scale-105"
                                        loading="lazy"
                                        @error="handleImgError"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 悬浮标签：优化阴影，增强层次感 -->
                        <div
                            class="absolute -top-1.5 -right-1.5 bg-primary/90 text-white text-xs py-0.5 px-2 rounded-full shadow-md hover:shadow-lg animate-bounce z-10"
                            :style="{ animationDuration: '2.5s' }"
                        >
                            <el-icon :size="13" class="mr-0.5"
                                ><Lightning /></el-icon
                            >智能
                        </div>
                        <div
                            class="absolute -bottom-1 -left-1 bg-accent/90 text-white text-xs py-0.5 px-2 rounded-full shadow-md hover:shadow-lg animate-pulse z-10"
                            :style="{ animationDuration: '3s' }"
                        >
                            <el-icon :size="13" class="mr-0.5"
                                ><TrendCharts /></el-icon
                            >高效
                        </div>
                    </div>

                    <!-- 标题区域：适配左侧宽度，优化排版 -->
                    <div class="px-2">
                        <h1
                            class="font-bold text-gray-800 mb-2.5 leading-tight"
                            :style="{
                                fontSize: 'clamp(1.4rem, 3vw, 2.1rem)',
                                textShadow: '0 1.5px 3px rgba(0, 0, 0, 0.08)',
                            }"
                        >
                            工程项目智能造价结算智能体
                        </h1>
                        <p
                            class="text-gray-600 mb-3 leading-relaxed"
                            :style="{
                                fontSize: 'clamp(0.875rem, 1.5vw, 1rem)',
                                display: '-webkit-box',
                                WebkitLineClamp: '2',
                                WebkitBoxOrient: 'vertical',
                                overflow: 'hidden',
                                lineHeight: '1.45',
                            }"
                        >
                            一键解析结算资料，提取报价及分部分项信息，校验资料完整性及合规性，智能生成结算报告
                        </p>
                    </div>
                </div>
            </div>

            <!-- 右侧：占比1份（父容器宽度的40%） -->
            <div style="width: 40%" class="flex items-center justify-center">
                <div
                    class="flex flex-col space-y-3.5 max-h-[380px] md:max-h-[420px] justify-center"
                >
                    <!-- 智能报价解析：适配右侧宽度 -->
                    <el-card
                        class="border-none shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md h-[110px] flex flex-col justify-center"
                        @mouseenter="cardHover = true"
                        @mouseleave="cardHover = false"
                        :style="{
                            transform: cardHover
                                ? 'translateY(-2px)'
                                : 'translateY(0)',
                        }"
                    >
                        <div class="flex items-start p-4">
                            <div
                                class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0"
                            >
                                <el-icon class="text-primary text-base"
                                    ><Document
                                /></el-icon>
                            </div>
                            <div>
                                <h3
                                    class="text-base font-semibold text-gray-800 mb-1"
                                >
                                    智能报价解析
                                </h3>
                                <p class="text-gray-600 text-xs md:text-sm">
                                    自动识别文档功能项，快速提取报价及分部分项信息
                                </p>
                            </div>
                        </div>
                        <div class="pl-6">
                            <el-button
                                type="plain"
                                size="small"
                                @click="router.push('/settMgmt/engSettPrep')"
                            >
                                进入
                                <el-icon class="el-icon--right"
                                    ><Right
                                /></el-icon>
                            </el-button>
                        </div>
                    </el-card>

                    <!-- 智能资料校核 -->
                    <el-card
                        class="border-none shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md h-[110px] flex flex-col justify-center"
                        @mouseenter="cardHover = true"
                        @mouseleave="cardHover = false"
                        :style="{
                            transform: cardHover
                                ? 'translateY(-2px)'
                                : 'translateY(0)',
                        }"
                    >
                        <div class="flex items-start p-4">
                            <div
                                class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0"
                            >
                                <el-icon class="text-primary text-base"
                                    ><ChatLineSquare
                                /></el-icon>
                            </div>
                            <div>
                                <h3
                                    class="text-base font-semibold text-gray-800 mb-1"
                                >
                                    智能资料校核
                                </h3>
                                <p class="text-gray-600 text-xs md:text-sm">
                                    智能解析24类结算资料，校验完整性及合规性，生成报告
                                </p>
                            </div>
                        </div>
                        <div class="pl-6">
                            <el-button
                                type="plain"
                                size="small"
                                @click="router.push('/settMgmt/settProjMgmt')"
                            >
                                进入
                                <el-icon class="el-icon--right"
                                    ><Right
                                /></el-icon>
                            </el-button>
                        </div>
                    </el-card>

                    <!-- 造价智能审批 -->
                    <el-card
                        class="border-none shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md h-[110px] flex flex-col justify-center"
                        @mouseenter="cardHover = true"
                        @mouseleave="cardHover = false"
                        :style="{
                            transform: cardHover
                                ? 'translateY(-2px)'
                                : 'translateY(0)',
                        }"
                    >
                        <div class="flex items-start p-4">
                            <div
                                class="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center mr-3 flex-shrink-0"
                            >
                                <el-icon class="text-primary text-base"
                                    ><Notebook
                                /></el-icon>
                            </div>
                            <div>
                                <h3
                                    class="text-base font-semibold text-gray-800 mb-1"
                                >
                                    造价智能审批
                                </h3>
                                <p class="text-gray-600 text-xs md:text-sm">
                                    智能校验造价数据，沉淀评估数据支持检索复用，助力决策
                                </p>
                            </div>
                        </div>
                        <div class="pl-6">
                            <el-button
                                type="plain"
                                size="small"
                                @click="router.push('/settMgmt/unifTodo')"
                            >
                                进入
                                <el-icon class="el-icon--right"
                                    ><Right
                                /></el-icon>
                            </el-button>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>

        <!-- 页脚：极简设计，适配整体布局 -->
        <el-footer
            class="border-t border-gray-200 p-1.5 h-[45px] flex items-center"
        >
            <div
                class="container mx-auto px-4 text-center text-gray-500 text-xs"
            >
                工程项目智能造价结算智能体 · 让工程项目结算管理更简单
                <p class="mt-0.5">© 2025 智能软件项目造价大模型 版权所有</p>
            </div>
        </el-footer>
    </div>
</template>

<script setup>
import { ref } from "vue";
// 引入Element Plus图标（确保项目已全局注册或单独引入）
import {
    Lightning,
    TrendCharts,
    Document,
    ChatLineSquare,
    Notebook,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 状态管理：替代CSS hover类，避免依赖@layer utilities
const isRobotHover = ref(false);
const cardHover = ref(false);

// 图片加载失败容错：优化占位图样式
const handleImgError = (e) => {
    e.target.src = "https://via.placeholder.com/120x120?text=智能造价体";
    e.target.alt = "智能造价结算机器人";
    e.target.classList.add("opacity-90"); // 加载失败时降低透明度，提示占位
};
</script>

<style scoped>
/* 全局滚动条隐藏（兼容全浏览器） */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
}

/* 机器人发光效果 */
.robot-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.18),
        inset 0 0 8px rgba(99, 102, 241, 0.05);
}
.robot-glow-hover {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3),
        inset 0 0 12px rgba(99, 102, 241, 0.1);
}

/* 主题色统一+兼容性处理 */
:root {
    --color-primary: #6366f1;
    --color-secondary: #a5b4fc;
    --color-accent: #818cf8;
    --color-light: #e0e7ff;
    --color-dark: #4338ca;
}
.bg-primary\/10 {
    background-color: rgba(99, 102, 241, 0.1);
}
.bg-primary\/90 {
    background-color: rgba(99, 102, 241, 0.9);
}
.bg-accent\/90 {
    background-color: rgba(129, 140, 248, 0.9);
}
.text-primary {
    color: var(--color-primary);
}

/* 卡片高度统一+适配 */
.el-card {
    height: 100%;
}
</style>
